<template>
  <div class="book-detail-container">
    <!-- 图书基本信息 -->
    <div class="book-info">
      <div class="book-cover">
        <el-image :src="book.coverUrl" fit="contain" class="cover-image">
          <template #error>
            <div class="cover-error">暂无封面</div>
          </template>
        </el-image>
      </div>
      <!-- 图书基本信息 -->
      <div class="boos-meta">
        <h2>{{ book.title }}</h2>
        <p><strong>作者：</strong>{{ book.author }}</p>
        <p><strong>出版社：</strong>{{ book.publisher }}</p>
        <p><strong>出版日期：</strong>{{ book.publishDate }}</p>
        <p><strong>ISBN：</strong>{{ book.isbn }}</p>
        <p><strong>简介：</strong>{{ book.description }}</p>
        <!-- 借阅按钮 -->
        <el-button type="primary" @click="openBorrowDialog">借阅</el-button>
      </div>
    </div>

    <!-- 用户评价 -->
    <div class="user-reviews">
      <h3>用户评价</h3>
      <el-card v-for="(review, index) in reviews" :key="index" class="review-card">
        <p><strong>{{ review.user }}</strong></p>
        <p>{{ review.comment }}</p>
      </el-card>
    </div>



    <!-- 分步借阅弹窗 -->
    <el-dialog v-model="borrowDialogVisible" title="借阅流程" :width="dialogWidth">
      <div class="borrow-dialog-content">
        <!-- 步骤条 -->
        <el-steps :active="currentStep" finish-status="success" :simple="!isMobile" align-center>
          <el-step title="书籍信息" description="确认书籍信息"></el-step>
          <el-step title="选择借阅时长" description="选择借书和还书日期"></el-step>
          <el-step title="确认借阅信息" description="确认借阅信息"></el-step>
        </el-steps>

        <!-- 步骤内容 -->
        <div class="borrow-step">
          <div v-if="currentStep === 1">
            <h4>书籍信息</h4>
            <p><strong>书名：</strong>{{ book.title }}</p>
            <p><strong>作者：</strong>{{ book.author }}</p>
            <p><strong>ISBN：</strong>{{ book.isbn }}</p>
            <el-button type="success" @click="nextStep">下一步</el-button>
          </div>

          <div v-if="currentStep === 2">
            <h4>选择借阅时长</h4>
            <el-date-picker v-model="borrowDate" type="date" placeholder="选择借书日期" class="date-picker"></el-date-picker>
            <el-date-picker v-model="returnDate" type="date" placeholder="选择还书日期" class="date-picker"></el-date-picker>
            <el-button type="success" @click="nextStep">下一步</el-button>
          </div>

          <div v-if="currentStep === 3">
            <h4>确认借阅信息</h4>
            <p><strong>书名：</strong>{{ book.title }}</p>
            <p><strong>作者：</strong>{{ book.author }}</p>
            <p><strong>借书日期：</strong>{{ borrowDate }}</p>
            <p><strong>还书日期：</strong>{{ returnDate }}</p>
            <el-button type="success" @click="completeBorrow">完成借阅</el-button>
          </div>
        </div>
      </div>
    </el-dialog>

    <el-skeleton :loading="isLoading" animated>
      <!-- 原有模板内容保持不变 -->
    </el-skeleton>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { ElMessage } from "element-plus";
import api from "@/api";
import { useRoute } from "vue-router";

const book = ref({
  title: "",
  author: "",
  publisher: "",
  publishDate: "",
  isbn: "",
  description: "",
  coverUrl: ""
});

const isLoading = ref(true);

const route = useRoute();

const borrowDialogVisible = ref(false);
const currentStep = ref(1);
const borrowDate = ref(null);
const returnDate = ref(null);

const isMobile = computed(() => window.innerWidth <= 768);
const dialogWidth = computed(() => (isMobile.value ? "90%" : "50%"));


// 获取图书详情
const fetchBookInfo = async () => {
  try {
    const res = await api.book.getBookInfo({ id: route.query.id });
    book.value = {
      ...res.data,
      coverUrl: res.data.coverUrl || require('@/assets/default_cover.png')
    };
  } catch (error) {
    console.log(error, "err")
    ElMessage.error("获取图书信息失败");
  } finally {
    isLoading.value = false;
  }
};

onMounted(fetchBookInfo);

const openBorrowDialog = () => {
  borrowDialogVisible.value = true;
  currentStep.value = 1;
};

const nextStep = () => {
  if (currentStep.value === 2 && (!borrowDate.value || !returnDate.value)) {
    ElMessage.error("请选择借书和还书日期！");
  } else {
    currentStep.value += 1;
  }
};

const completeBorrow = () => {
  if (borrowDate.value && returnDate.value) {
    if (new Date(borrowDate.value) < new Date(returnDate.value)) {
      ElMessage.success("借阅成功！");
      borrowDialogVisible.value = false;
    } else {
      ElMessage.error("借书日期必须早于还书日期！");
    }
  } else {
    ElMessage.error("请选择借书和还书日期！");
  }
};
</script>

<style lang="scss" scoped>
$primary-color: #409EFF;
$secondary-color: #67C23A;
$text-color: #333;
$background-color: #f9f9f9;

.book-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: $background-color;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-radius: 12px;

  .book-info {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;

    @media (max-width: 768px) {
      flex-direction: column;
    }

    .book-cover {
      width: 260px;
      min-width: 260px;
      position: relative;

      @media (max-width: 768px) {
        width: 100%;
        min-width: auto;
      }

      .cover-image {
        width: 100%;
        height: 360px;
        border-radius: 12px;
        object-fit: cover;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

        @media (max-width: 768px) {
          height: auto;
          aspect-ratio: 2/3;
        }
      }

      .cover-error {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(255, 255, 255, 0.8);
        color: $text-color;
        font-size: 1rem;
        text-align: center;
        border-radius: 8px;
        padding: 10px;
      }
    }

    .book-meta {
      flex: 1;

      h2 {
        font-size: 2rem;
        color: $text-color;
        margin-bottom: 10px;
      }

      p {
        margin: 5px 0;
        font-size: 1rem;
        line-height: 1.6;
        color: darken($text-color, 20%);

        strong {
          color: darken($text-color, 10%);
        }
      }

      .el-button {
        margin-top: 20px;
        background-color: $primary-color;
        border-color: $primary-color;
        color: #fff;

        &:hover {
          background-color: lighten($primary-color, 5%);
          border-color: lighten($primary-color, 5%);
        }

        @media (max-width: 768px) {
          width: 100%;
        }
      }
    }
  }

  .user-reviews {
    margin-top: 40px;

    h3 {
      font-size: 1.5rem;
      color: $text-color;
      margin-bottom: 15px;
    }

    .review-card {
      margin-bottom: 15px;
      padding: 15px;
      background: #fff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      border-radius: 8px;

      p {
        font-size: 1rem;
        line-height: 1.5;
        color: darken($text-color, 10%);
      }
    }
  }

  .borrow-dialog-content {
    .borrow-step {
      margin-top: 20px;

      .date-picker {
        width: 100%;
        margin-bottom: 15px;
      }

      .el-button {
        width: fit-content;
        margin-top: 15px;
        background-color: $secondary-color;
        border-color: $secondary-color;
        color: #fff;

        &:hover {
          background-color: lighten($secondary-color, 5%);
          border-color: lighten($secondary-color, 5%);
        }
      }
    }
  }
}
</style>